@extends('layout.member')

@section('body')
  <div class="panel active">
    <div class="panel-head">
      <h4>APP物料列表</h4>
    </div>
    <div class="panel-body">
      <div class="appTable">
        App名称：
        <div class="layui-inline">
          <input class="layui-input" name="app_name" placeholder="请输入App搜索名称" id="appReload" autocomplete="off">
        </div>
        <button class="layui-btn search" data-type="reload">搜索</button>
        <a href="{{route('materielApp.create')}}">
          <button class="layui-btn fr">添加APP物料</button>
        </a>
      </div>
      <!-- tab -->
      <table class="table table-bordered layui-table"
             lay-data="{url:'{{route('member.materielApp.layui.list')}}', page:true,limit:20,id:'appReload'}"
             lay-filter="materielApp">
        <thead>
        <tr>
          <th lay-data="{field:'id',align: 'center'}">App编号</th>
          <th lay-data="{field:'materiel_name',align: 'center', sort: true}">物料名称</th>
          <th lay-data="{field:'app_name',align: 'center', sort: true}">App名称</th>
          <th lay-data="{field:'visits_min',align: 'center', sort: true}">访问最小次数</th>
          <th lay-data="{field:'visits_max',align: 'center', sort: true}">访问最大次数</th>
          <th lay-data="{field:'created_at',align: 'center', sort: true}">添加时间</th>
          <th lay-data="{field:'',width:180,align: 'center',toolbar: '#materielApp'}">操作</th>
        </tr>
        </thead>
      </table>
    </div>
  </div>
  <script type="text/html" id="materielApp">
    <button class="layui-btn layui-btn-normal layui-btn-xs" lay-event="edit">编辑</button>
    <button class="layui-btn layui-btn-normal layui-btn-xs" lay-event="delete">删除</button>
  </script>
@endsection
@section('js')
  <script type="text/javascript">
      layui.use(['form', 'table'], function () {
          var table = layui.table;
          //监听工具条
          table.on('tool(materielApp)', function (obj) { //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
              var data = obj.data; //获得当前行数据
              var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
              if ((layEvent === 'edit')) {
                  //编辑
                  window.location.href = '{{url('/member/materielApp')}}/' + data.id + '/edit';
              } else {
                  //删除
                  layer.confirm('您确定删除该条App物料', {
                      btn: ['确定', '取消'], //按钮
                      title: '删除App物料'
                  }, function () {
                      $.post("{{url('/member/materielApp')}}/" + data.id, {
                          '_method': 'delete',
                          '_token': "{{csrf_token()}}"
                      }, function (data) {
                          if (data.status == 200) {
                              obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
                              layer.msg(data.msg);
                          } else {
                              layer.msg(data.msg);
                          }
                      });
                  });
              }
          });

          var $ = layui.$, active = {
              reload: function () {
                  //执行重载
                  table.reload('appReload', {
                      page: {
                          curr: 1 //重新从第 1 页开始
                      }
                      , where: {
                          app_name: $('input[name=app_name]').val()
                      }
                  });
              }
          };
          $('.appTable .search').on('click', function () {
              var type = $(this).data('type');
              active[type] ? active[type].call(this) : '';
          });
      });
  </script>
@append